<template>
  <a-modal
    :title="this.title"
    :visible="this.visible"
    @cancel="cancel"
    @ok="ok"
  >
    <a-form :form="form" layout="horizontal">
      <a-form-item
        :label-col="labelCol" :wrapper-col="wrapperCol"
        label="用户ID"
        style="display:none;"
      >
        <a-input v-decorator="['id']"/>
      </a-form-item>
      <a-form-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="用户名"
      >
        <a-input v-decorator="['userName']" disabled/>
      </a-form-item>
      <a-form-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="真实姓名"
      >
        <a-input v-decorator="['realName']" disabled/>
      </a-form-item>
      <a-form-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="旧密码"
      >
        <a-input v-decorator="this.validator.oldpassword" type="password"/>
      </a-form-item>
      <a-form-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="新密码"
      >
        <a-input v-decorator="[
              'password',
              {
                rules:[{
                  required: true, message:'请输入新密码'
                },{
                  validator: validateToNextPassword
                }]
              }
           ]" type="password"/>
      </a-form-item>
      <a-form-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="确认新密码"
      >
        <a-input v-decorator="[
              'newPwdAgain',
              {
                rules:[{
                  required: true, message:'请确认新密码'
                },{
                  validator: checkPwd
                }]
              }
           ]" type="password"
                 @blur="handleConfirmBlur"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
  import aModal from "@/common/modal"
  import {pwdForm} from "@/../static/js/formValidators.js"
  import {RESETUSERPASSWORD} from '@/../static/js/apis.js'

  export default {
    name: "pwdModal",
    props: ['title', 'visible', 'resetPwdId'],
    components: {
      aModal
    },
    data() {
      return {
        form: this.$form.createForm(this),
        labelCol: {span: 5},
        wrapperCol: {span: 18},
        /*验证规则*/
        validator: pwdForm,
        confirmDirty: false
      }
    },
    methods: {
      ok(e) {
        const self = this;
        e.preventDefault();
        self.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
            values.id = self.resetPwdId;
            //按需引入方法，提供参数和正确数据的处理方法即可
            RESETUSERPASSWORD(values, function (res) {
              if (res.success) {
                self.$message.success(res.messsage)
                self.$emit("ok", e);
                self.form.resetFields();
              } else
                self.$message.error(res.messsage)
            })

          } else {
            self.$message.error("请按要求填写密码信息！")
            return;
          }
        });

      },
      cancel(e) {
        this.form.resetFields();
        this.$emit("cancel", e)
      },
      //确认新密码
      checkPwd(rule, value, callback) {
        const form = this.form;
        if (value && value !== form.getFieldValue('password')) {
          callback('请确认与新密码一致!');
        } else {
          callback();
        }
      },
      handleConfirmBlur(e) {
        const value = e.target.value;
        this.confirmDirty = this.confirmDirty || !!value;
      },
      validateToNextPassword(rule, value, callback) {
        const form = this.form;
        if (value && this.confirmDirty) {
          form.validateFields(['newPwdAgain'], (err, fieldsValue) => {
            if (err) {
              //必须对错误做返回处理，否则console打印错误提示。
              return;
            }
          })
        }
        callback();
      }
    }
  }
</script>

<style scoped>
  .ant-form-item {
    margin-bottom: 0px;
  }
</style>
